<template>
  <div class="loginStyle">
    <el-row type="flex" class="row-bg" justify="center">
      <el-card
        class="box-card"
        shadow="hover"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-background="rgb(255,255,255)"
      >
        <div slot="header" class="clearfix">
          <h2>妙安医疗管理系统</h2>
        </div>

        <!-- 登录表单 -->
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm typography"
        >
          <el-form-item label="用户名" prop="userName">
            <el-input
              v-model="ruleForm.userName"
              autocomplete="off"
              @focus="loginError()"
            ></el-input>
            <div class="el-form-item__error err">
              用户名或密码输入错误
            </div>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              v-model="ruleForm.password"
              autocomplete="off"
              @focus="loginError()"
            ></el-input>
          </el-form-item>

          <!-- 滑块验证码 -->
          <div class="slider">
            <div class="content">
              <div class="bg-img-div">
                <img id="bg-img" src="" alt />
              </div>
              <div class="slider-img-div">
                <img id="slider-img" src="" alt />
              </div>
            </div>
            <div class="validateCodeError">
              滑块验证出现错误
            </div>
            <div class="slider-move">
              <div class="slider-move-track">
                拖动滑块完成拼图
              </div>
              <div class="slider-move-btn"></div>
            </div>
            <div class="bottom">
              <div class="close-btn"></div>
              <div class="refresh-btn"></div>
            </div>
          </div>

          <!--登录/重置，按钮-->
          <el-form-item>
            <el-button
              type="primary"
              @click="submitForm('ruleForm')"
              v-loading.fullscreen.lock="fullscreenLoading"
              >提交</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-row>
  </div>
</template>

<script>
//滑块验证码显示操作
import CaptchaValidate from "../../static/js/Captcha/FormSubmit";

export default {
  data() {
    return {
      //用户名/密码
      ruleForm: {
        userName: "",
        password: ""
      },
      rules: {
        //合格验证
        userName: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur"
          },
          {
            min: 2,
            max: 8,
            message: "名称在2~8个字符之间",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          },
          {
            min: 6,
            max: 12,
            message: "密码必须在6~12个字符之间",
            trigger: "blur"
          }
        ]
      },
      //加载
      fullscreenLoading: false,
      loading: false
    };
  },
  methods: {
    /**
     * 表单提交
     */
    submitForm(formName) {
      this.loginError();
      this.fullscreenLoading = true;
      this.$refs[formName].validate(valid => {
        if (valid) {
          //将滑块验证码显示到所有元素的上面
          CaptchaValidate.moifyIndex(999);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      this.fullscreenLoading = false;
    },
    /**
     * 内容重置
     */
    resetForm(formName) {
      this.loginError();
      this.$refs[formName].resetFields();
    },
    /**
     * 用户名或密码错误提示
     */
    loginError() {
      CaptchaValidate.loginErrorDispaly("none");
    },

    /**
     * 滑块验证码是由外部JS实现的，存储在sessionStorage中，读取并将存储到Vuex中
     * 并将外部的sessionStorage的数据删除
     * 此方法由外部JS执行
     */
    saveData() {
      let res = JSON.parse(sessionStorage.getItem("obj"));
      //调用 Vuex 来保存登录数据
      this.$store.commit("login", res.data);
      this.$router.push("/main");
      this.$message.success("欢迎你：" + this.$store.state.userStore.userName);
      //删除"obj"的sessionStorage
      sessionStorage.removeItem("obj");
    },
    /**
     * 开启/关闭加载动画
     */
    openOrCloseLoading(isOpen) {
      this.loading = isOpen;
    }
  },
  /**
   *  window.addData = this.saveData;
   * 抛出给外部js
   */
  mounted() {
    window.addData = this.saveData;
    window.openOrCloseLoading = this.openOrCloseLoading;
  }
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
  margin-top: 100px;
}

.typography {
  padding-right: 70px;
}
.loginStyle {
  background: url("../assets/MiaoAnBackground.png") no-repeat;
  height: 100%;
  background-size: 100%100%;
}
.err {
  display: none;
}

/* 滑块验证码 */

.slider {
  background-color: #fff;
  width: 278px;
  height: 285px;
  z-index: -2;
  box-sizing: border-box;
  padding: 9px;
  border-radius: 6px;
  box-shadow: 0 0 11px 0 #999999;
  position: absolute;
  top: 120px;
  margin-left: 80px;
}

.slider .content {
  width: 100%;
  height: 159px;
  position: relative;
}

.bg-img-div {
  width: 100%;
  height: 100%;
  position: absolute;
  transform: translate(0px, 0px);
}
.slider-img-div {
  height: 100%;
  position: absolute;
  transform: translate(0px, 0px);
}

.bg-img-div img {
  width: 100%;
}

.slider-img-div img {
  height: 100%;
}

.slider .slider-move {
  height: 60px;
  width: 100%;
  margin: 11px 0;
  position: relative;
}

.slider .bottom {
  height: 19px;
  width: 100%;
}

.refresh-btn,
.close-btn,
.slider-move-track,
.slider-move-btn {
  background: url(https://static.geetest.com/static/ant/sprite.1.2.4.png)
    no-repeat;
}

.refresh-btn,
.close-btn {
  display: inline-block;
}

.slider-move .slider-move-track {
  line-height: 38px;
  font-size: 14px;
  text-align: center;
  white-space: nowrap;
  color: #88949d;
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
.slider {
  user-select: none;
}

.slider-move .slider-move-btn {
  transform: translate(0px, 0px);
  background-position: -5px 11.79625%;
  position: absolute;
  top: -12px;
  left: 0;
  width: 66px;
  height: 66px;
}

.slider-move-btn:hover,
.close-btn:hover,
.refresh-btn:hover {
  cursor: pointer;
}

.bottom .close-btn {
  width: 20px;
  height: 20px;
  background-position: 0 44.86874%;
}

.bottom .refresh-btn {
  width: 20px;
  height: 20px;
  background-position: 0 81.38425%;
}
.after {
  color: #88949d;
}
.validateCodeError {
  position: absolute;
  top: 147px;
  left: -1px;
  background-color: #ff7676;
  width: 100%;
  display: none;
}
</style>
